<template>
   <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">添加联系人</el-menu-item>
    <el-sub-menu index="3">
      <template #title>我的</template>
      <el-menu-item index="3-1">登录</el-menu-item>
      <el-menu-item index="3-2">注销</el-menu-item>
      <el-menu-item index="3-3">修改资料</el-menu-item>
      <el-sub-menu index="3-4" :disabled="!(checkRole('/report')||checkRole('/report02'))">
          <template #title>统计</template>
          <el-menu-item index="3-4-1" v-if="checkRole('/report')">柱形图</el-menu-item>
          <el-menu-item index="3-4-2" v-if="checkRole('/report02')">饼图</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
   <el-sub-menu index="4">
          <template #title>AI</template>
          <el-menu-item index="4-1-1">智能小助手</el-menu-item>
          <el-menu-item index="4-1-2">中医大师</el-menu-item>
          <el-menu-item index="4-1-3">小画家</el-menu-item>
          <el-menu-item index="4-1-4">小厨师</el-menu-item>
    </el-sub-menu>
     <el-menu-item index="5">新闻</el-menu-item>
     <el-menu-item index="6">游戏</el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import {userStore} from '../store/UserStore.js'
import { inject } from 'vue'

const activeIndex2 = ref('1')
const router=useRouter();
const store=userStore();

/*function checkRole(path){
  let ary= router.getRoutes().filter(r=>{return r.path==path&&r.meta&&r.meta.roles})
  if(ary.length==0)
    return true;
  if(!store.isLogin)
    return false;
  return ary[0].meta.roles.includes(store.user.role)
}*/


const roleAry=inject("roleAry")

function checkRole(path){//判断某个网址，当前用户是否有权限
   let roles= roleAry[path];//获取网址对应的角色限制
   if(!roles)//如果不存在角色限制，直接显示
     return true;
   if(store.user==null)//如果没有登录
     return false;//菜单不显示
   return roles.includes(store.user.role);//当前用户的角色，是否在约定的角色范围内
}

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)

  switch (key) {
    case '3-1':
      router.push("/login");
      break;
    case '1':
      router.push("/list")
      break;
    case '2':
      router.push("/add")
      break;
    case '3-4-1':
      router.push("/report")
      break;
    case '3-4-2':
      router.push("/report02")
      break;
    case '4-1-1':
      router.push("/ai/helper")
      break;
    case '4-1-2':
      router.push("/ai/doctor")
      break;
    case '4-1-3':
      router.push("/ai/img")
      break;
    case '4-1-4':
      router.push("/ai/cooker")
      break;
    case '6':
      router.push("/game")
      break;
    default:break;
     
  }
}
</script>
